// 拓展vue原有的功能: 全局组件 自定义指令 挂载原型 vue3已经淘汰过滤器
// 挂载原型方式 app.config.globalProperties.xxx
// import XtxSkeleton from '@/components/library/XtxSkeleton'
// import XtxCarousel from '@/components/library/XtxCarousel'
// import XtxMore from '@/components/library/XtxMore'
// import XtxBread from '@/components/library/XtxBread'
// import XtxBreadItem from '@/components/library/XtxBreadItem'
import defaultImg from '@/assets/images/200.png'
import XtxMessage from './Message'
import XtxConfirm from './Confirm'

/**
 * 目录路径 是否加载子目录 加载文件的正则匹配
 * context('./', false, /\.vue$/)
 */
const importFn = require.context('./', false, /\.vue$/)

export default {
  install (app) {
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)
    // app.component(XtxBread.name, XtxBread)
    // app.component(XtxBreadItem.name, XtxBreadItem)

    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })
    // 定义指令
    defineDirective(app)

    // 挂载消息函数到原型上
    app.config.globalProperties.$xtxmessage = XtxMessage
    app.config.globalProperties.$xtxconfirm = XtxConfirm
  }
}

// 定义指令
const defineDirective = (app) => {
  // 1.图片懒加载
  // 先存储图片，不放在src上，当进入可视区，当存储的图片地址设置给图片元素
  app.directive('lazyload', {
    mounted (el, binding) {
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 停止观察
          observe.unobserve(el)
          // 处理图片加载失败
          el.onerror = () => {
            el.src = defaultImg
          }
          el.src = binding.value
        }
      }, {
        threshold: 0
      })
      // 开启观察
      observe.observe(el)
    }
  })
}
